<script setup lang="ts">
import { inject, reactive } from 'vue';
import { myStore } from '@/store/my';
import { jobIntentionAPI } from '@/api/my'
import { Toast } from 'vant';
import { sys } from 'typescript';
const store = myStore()

const state = reactive({
    value: '',
    show: false,
    skillList:<any> [],
    sysSkillList:<any> [],
})
// 处理技能
const setInfo = () => {
    // 处理个人简历的系统技能
    if (store.state.resumeInfo.sys_skill_ids) {
        var arr = <any>[]
        var skill = store.state.resumeInfo.sys_skill_ids.split(',')
        
        for(var i = 0; i < store.state.sysSkill.length; i ++)  {
            var flag = false
            // 如果 个人简历信息的系统技能 与 系统技能 相等 让他被选中
            for(var j = 0; j < skill.length; j++) {
                if (skill[j] == store.state.sysSkill[i].title) {
                    flag = true
                    arr.push({
                        title: store.state.sysSkill[i].title,
                        active: true
                    })
                }
            }
        }
        state.sysSkillList = arr

    }
    // 处理个人简历的自定义技能
    if (store.state.resumeInfo.skill_ids) {
        var arr = <any>[]
        var skill = store.state.resumeInfo.skill_ids.split(',')
        // 如果 个人简历信息的自定义技能 与 自定义技能 相等 让他被选中
        for(var i = 0; i < skill.length; i++) {
            arr.push({
                title: skill[i],
                active: true
            })
        }
        state.skillList = arr
    }
}
if (store.state.sysSkill.length == 0) {
    (async function () {
        // 获取简历技能关键字
        await store.getsysSkill()
        setInfo()
    })()
}else{
    setInfo()
    
}

const {closeChange} = inject('popup')
// 添加技能
const skillChange = () => {
    state.skillList.push({
        title: state.value,
        active: false
    })
    state.value = ''
    state.show = false
}
// 删除技能
const clearSkill = (index: number) => {
    // 通过下标删除元素
    state.skillList.splice(index,1)
}
// 点击自定义的技能
const setSkill = (index: number) => {
    // 设置状态 取反
    state.skillList[index].active = !state.skillList[index].active
}
// 点击系统的技能
const setSysSkill = (index: number) => {
    state.sysSkillList[index].active = !state.sysSkillList[index].active
}
// 保存按钮
const submit = async() => {
    // 获取选中的自定义标签
    var arr = []
    for(var i = 0; i < state.skillList.length; i++) {
        if (state.skillList[i].active) {
            arr.push(state.skillList[i].title)
        }
    }
    // 获取选中的系统标签
    var sysArr = []
    for(var i = 0; i < state.sysSkillList.length; i++) {
        if (state.sysSkillList[i].active) {
            sysArr.push(state.sysSkillList[i].title)
        }
    }
    if (sysArr.length == 0) {
        Toast('请选择一项非自定义技能')
        return
    }
    const res = jobIntentionAPI({
        "skill_ids": arr.join(','), 
        "sys_skill_ids": sysArr.join(',')
    })
    if (res) {
        closeChange()
        Toast('保存成功')
    }else{
        Toast('保存失败')
    }
}
</script>
<template>
       <van-nav-bar
        title="技能关键词"
        left-arrow
        @click-left="closeChange"
    />
    <dl class="skill-list">
        <!-- 系统技能 且个人简历中有的技能 -->
        <dt v-for="(item, index) in state.sysSkillList" 
            :key="index"
            @click="setSysSkill(index)"
            :class="item.active? 'active': ''"
        >
            {{ item.title }}
        </dt>
        <!-- 自定义技能 -->
        <dt v-for="(item, index) in state.skillList"
            @click="setSkill(index)"
            :key="index"
            :class="item.active? 'active': ''"
        >
            {{ item.title }}
            <!-- 删除需阻止冒泡 -->
            <van-icon name="close" @click.stop="clearSkill(index)" />
        </dt>
        <dt @click="state.show = true">自定义+</dt>
    </dl>
    <!-- 自定义弹框 -->
    <van-dialog 
        v-model:show="state.show" 
        title="自定义+" 
        show-cancel-button  
        @confirm="skillChange"
        @cancel="state.show=false"
    >
        <van-field
            class="skill-field"
            v-model="state.value" 
            label="" 
            placeholder="请输入您想要的标签"
        />
    </van-dialog>
    <button class="wy-submit" @click="submit">保存</button>
</template>

<style scoped>
.skill-list {
    padding: 1.31rem 1.09rem;

}
.skill-list dt {
    font-weight: 400;
    font-size: 0.64rem;
    color: #333333;
    line-height: 1.5rem;
    height: 1.5rem;
    background: #FFFFFF;
    border-radius: 0.27rem;
    min-width: 4.5rem;
    display: inline-block;
    text-align: center;
    border: 1px solid #E6E6E6;
    margin-right: 0.64rem;
    margin-bottom: 0.8rem;
    margin-left: 0.6rem;
}
.skill-list dt:nth-child(3n) {
    margin-right: 0;
}
.skill-list dt.active {
    border: 1px solid #FF8E00;
    color: #FF8E00;
}
.skill-list dt i {
    margin-left: 0.2rem;
}
.skill-field {
    margin: 0 1rem;
}
</style>